<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=7" />
	<title>Demo - JQuery Form Validation And Hints</title>
	<link rel="stylesheet" media="all" type="text/css" href="css/demos-header.css" />
	<link rel="stylesheet" media="all" type="text/css" href="../css/errors.css" />
	<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
	<script src="../js/jquery.form-validation-and-hints.js" type="text/javascript"></script>
</head>

<body>
	<div id="main">
		<div id="mainhead">
			<div class="mbody">
				<h1><a href="http://www.icograma.com"><img src="http://www.icograma.com/cms/wp-content/themes/icograma/rsrc/icograma_logo.gif" alt="icograma" width="126" height="24" /></a></h1>
				<h2><a href="http://www.icograma.com/jquery-form-validation-and-hints/">JQuery Form Validation And Hints</a> Demo<br /><dfn>Client-Side Form Validation</dfn></h2>
			</div><!-- /mbody -->
		</div><!-- /mainhead -->
		<div id="mainbody">
			<div class="mbody">
				<form>
					<h3>Sample Form</h3>

					<div class="field required">
						<p><label>Required field</label><br />
							<input class="text verifyText" type="text" /><br />
							<span class="iferror">Field required</span>
						</p>
					</div><!--/field-->
					
					<div class="field required">
						<p><label>Password field with hint</label><br />
							<input class="text" type="password" title="*Password hint..." /><br />
							<span class="iferror">Field required</span>
						</p>
					</div><!--/field-->

					<div class="field">
						<p><label>Optional field</label><br />
							<input class="text" type="text" /><br />
						</p>
					</div><!--/field-->

					<div class="field required">
						<p><label>Integer</label><br />
							<input class="text verifyInteger" type="text" size="8" /><br />
							<span class="iferror">This value must be an integer</span>
						</p>
					</div><!--/field-->

					<div class="field required">
						<p><label>Email</label><br />
							<input class="text verifyMail" type="text" size="24" title="*mail@example.com" /><br />
							<span class="iferror">Field email</span>
						</p>
					</div><!--/field-->

					<div class="field">
						<p>Textarea <br />
							<textarea rows="10" cols="50" title="*Write your message here..."></textarea>
						</p>
					</div><!--/field-->
					
					<div class="field required">
						<p>
							<input class="checkbox" type="checkbox" name="terms" /> I agree with the terms and conditions
							<span class="iferror">You must agree with the terms and conditions to continue</span>							
						</p>
					</div><!--/field-->
					
					<div class="field required">
						<p>
							<input class="radio" type="radio" name="sex" value="male" /> Male <br />
							<input class="radio" type="radio" name="sex" value="female" /> Female <br />
							<span class="iferror">You must select an option</span>
						</p>
					</div><!--/field-->
					
					<div class="field required">
						<p><label>Select</label><br />
							<select>
								<option value="">Select an option...</option>
								<option value="1">Option 1</option>
								<option value="1">Option 2</option>
							</select>
							<span class="iferror">Please, select an option</span>
						</p>
					</div><!--/field-->
					
					<div class="field required">
						<p><label>File field</label><br />
							<input class="file" type="file" /><br />
							<span class="iferror">Field required</span>
						</p>
					</div><!--/field-->

					<p><input class="submit" type="submit" value="Send" /></p>
				</form>
			</div><!-- /mbody -->
		</div><!-- /mainbody -->
	</div><!-- /main -->
</body>
</html>
